<template>
   <div class="navbar">
    <van-nav-bar :title="title" left-text="返回" left-arrow border fixed @click-left="clickToHome" >
      <template #left>
        <van-icon name="wap-home-o" size="25" color="#7f7f7f" />
      </template>
      <template #right>
        <van-icon name="search" size="25" color="#7f7f7f" @click="clickToSearch" />&nbsp;&nbsp;&nbsp;
        <van-icon name="cart-o" size="25" color="#7f7f7f" :badge="count" @click="clickToCart" />
      </template>
    </van-nav-bar>
  </div>

</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const props = defineProps<{
  title: string,
  count?: number,
}>()
const Router = useRouter()
const clickToHome = () => {
  Router.push({
    path: '/home'
  })
}
const clickToSearch = () => {
  Router.push({
    path: '/search'
  })
}
const clickToCart = () => {
  Router.push({
    path: '/cart'
  })
}
</script>

<style scoped lang="less">
.navbar{
  width: 100%;
  height: 45px;
}
</style>